<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="lsc">
    <script src="../jq/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        ul,li{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 520px;
            height: 280px;
            margin: 100px auto;
            position: relative;
        }
        #box .list li{
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #box .list li.current{
            display: block;
        }
        #box .count{
            position: absolute;
            right: 190px;
            bottom: 10px;
        }
        #box .count li{
            float: left;
            width: 20px;
            height: 20px;
            background-color: black;
            text-align: center;
            line-height: 20px;
            margin-left: 10px;
            color: #fff;
            opacity: 0.8;
            cursor: pointer;
        }
        #box .count li.current{
            background-color: gray;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul class="list"> 
            <li class="current"><img src="img/01.jpg" alt=""></li>
            <li><img src="img/02.jpg" alt=""></li>
            <li><img src="img/03.jpg" alt=""></li>
            <li><img src="img/04.jpg" alt=""></li>
            <li><img src="img/05.jpg" alt=""></li>
        </ul>
        <ul class="count">
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>
</html>
<script>
    var box = $('#box');
    var aLi =$('.list li');
    var aNum =$('.count li');
    // 记录当前显示的图片的索引值
    var current = 0;
    // 定时器
    var timer = null;
    // 自动
    timer = setInterval(autoPlay,1000);
    function autoPlay(){
        current ++;
        if(current >= aLi.length){
            current  = 0;
        }
        // 根据current值让当前的图片显示，其他兄弟元素隐藏
        aLi.eq(current).show().siblings().hide();
        // 根据current值为数字图标添加类名，其他兄弟元素移除类名
        aNum.eq(current).addClass('current')
        .siblings().removeClass('current');
    }

    //  手动
     aNum.mouseover(function(){
        // aNum 获取当前索引(光标移动到数字图标上的索引值)
            var index = aNum.index(this);
        //根据aNum 索引值来设置aLi的图片显示或隐藏
            aLi.eq(index).show().siblings().hide();
            $(this).addClass('current')
            .siblings().removeClass('current');

            // 记录当前索引赋值给current
            // (以便自动轮播图修改当前显示的图片)
            current=index;
       });    
           
    // 当鼠标移入box容器的时候 移除定时器(停止)
    // 鼠标移出的继续自动播放
    box.hover(function(){
        clearInterval(timer);  
    },function(){
        timer = setInterval(autoPlay,1000);
    })
</script>